<template>
  <div class="e-container">
    <div>
      <span class="title">既有应用系统</span>
      <div class="system">
        <div v-for="(item, index) in systemData" :key="index" @click="handleDialog(item)">
          <div class="top">
            <img :src="item.imgUrl" />
            <span>{{ item.name }}</span>
          </div>
          <div class="bottom">
            <p class="left">
              <span>{{ item.num }}</span
              >{{ item.unit }}
            </p>
            <div class="right" :class="{ on: !item.isUp }">
              <p class="rate">
                <img :src="`${item.isUp ? upArrow : downArrow}`" />
                <span>{{ item.rate }}%</span>
              </p>
              <p class="text">{{ item.isUp ? "同比增长" : "同比下降" }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="btns">
        <span class="btn" :class="{ on: curSysCount === 1 }" @click="handleSysCount(1)">符合标准数</span>
        <span class="btn" :class="{ on: curSysCount === 2 }" @click="handleSysCount(2)">可整改数</span>
        <span class="btn" :class="{ on: curSysCount === 3 }" @click="handleSysCount(3)">不可整改数</span>
        <p class="unit">单位：个</p>
      </div>
      <sysBar :value="sysCountData" />
    </div>
  </div>
  <Dialog :title="dialogData.title" :visible="dialogData.visible" @close="dialogData.visible = false" />
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import sysBar from "./charts/bar4.vue";
import Dialog from "@/components/Dialog/Dialog.vue";
import bzIcon from "@/static/bzIcon.png";
import zgIcon from "@/static/zgIcon.png";
import rateIcon from "@/static/rateIcon.png";
import upArrow from "@/static/upArrow.png";
import downArrow from "@/static/downArrow.png";

import {
  GETgetJyxtbzfhs,
  GETgetJyxtbkzgs,
  GETgetJyxtbzfhl,
  GETgetJyxtbkzgl,
  GETgetJyxtbzfhsTwo,
  GETgetJyxtkzgsTwo,
  GETgetJyxtbkzgsTwo,
} from "../../../api/dataSource";

let systemData = ref([
  {
    key: "bzfhs",
    imgUrl: bzIcon,
    name: "标准符合数",
    num: "0",
    unit: "个",
    isUp: true,
    rate: "5",
  },
  {
    key: "bkzgs",
    imgUrl: zgIcon,
    name: "不可整改数",
    num: "0",
    unit: "个",
    isUp: true,
    rate: "5",
  },
  {
    key: "bzfhl",
    imgUrl: rateIcon,
    name: "标准符合率",
    num: "0",
    unit: "%",
    isUp: false,
    rate: "5",
  },
  {
    key: "bkzgl",
    imgUrl: rateIcon,
    name: "不可整改率",
    num: "0",
    unit: "%",
    isUp: false,
    rate: "5",
  },
]);
let curSysCount = ref(1);
let sysCountData = reactive({ yData: [], data: [] });
let dialogData = reactive({ title: "", visible: false });

function handleSysCount(index) {
  curSysCount.value = index;
  if (index == 1) {
    GETgetJyxtbzfhsTwo().then((res) => {
      sysCountData.yData = res.data.map((item) => item.name);
      sysCountData.data = res.data.map((item) => item.value);
    });
  } else if (index == 2) {
    GETgetJyxtkzgsTwo().then((res) => {
      sysCountData.yData = res.data.map((item) => item.column1);
      sysCountData.data = res.data.map((item) => item.column2);
    });
  } else if (index == 3) {
    GETgetJyxtbkzgsTwo().then((res) => {
      sysCountData.yData = res.data.map((item) => item.column1);
      sysCountData.data = res.data.map((item) => item.column2);
    });
  }
}

function initData() {
  //既有系统标准符合数
  GETgetJyxtbzfhs().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "bzfhs") {
        item.num = res.data.count || 0;
      }
    });
  });
  //既有系统不可整改数
  GETgetJyxtbkzgs().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "bkzgs") {
        item.num = res.data.count || 0;
      }
    });
  });
  //既有系统标准符合率
  GETgetJyxtbzfhl().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "bzfhl") {
        item.num = res.data[1]?.value.replace("%", "") || 0;
      }
    });
  });
  //既有系统不可整改率
  GETgetJyxtbkzgl().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "bkzgl") {
        item.num = res.data.count || 0;
      }
    });
  });
}

function handleDialog(data) {
  if (data.key == "bzfhs") {
    dialogData.visible = true;
    dialogData.title = data.name;
  }
}

onMounted(() => {
  initData();
  handleSysCount(curSysCount.value);
});
</script>

<style scoped lang="scss">
.e-container {
  height: 100%;
  display: flex;
  justify-content: space-between;

  p {
    padding: 0;
    margin: 0;
  }

  > div {
    padding: 20px 10px 10px;
    background-color: rgba(11, 44, 106, 0.6);
    border-radius: 4px;
    box-sizing: border-box;

    &:first-child {
      width: 39%;
    }

    &:nth-child(2) {
      width: 60%;
    }

    .title {
      position: relative;
      display: block;
      height: 26px;
      padding-left: 20px;
      font-size: 16px;
      font-weight: bold;
      color: transparent;
      background-image: linear-gradient(to bottom, #fff, #98bbff);
      -webkit-background-clip: text;
      background-clip: text;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 0;
        top: 7px;
        background-color: #3a8fff;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      }
    }

    .system {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      > div {
        width: 49%;
        padding: 10px;
        margin-top: 10px;
        box-sizing: border-box;
        background-color: rgba(11, 44, 106, 0.8);
        border-radius: 4px;

        .top {
          display: flex;
          align-items: center;

          img {
            width: 23px;
            height: 23px;
            margin-right: 10px;
          }

          span {
            color: #fff;
            font-size: 14px;
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;

          .left {
            color: #37c9c9;
            font-size: 14px;
            margin-right: 20px;

            span {
              margin-right: 5px;
              font-size: 28px;
              font-weight: bold;
            }
          }

          .right {
            color: #0eff36;

            .rate {
              img {
                width: 7px;
                height: 12px;
                margin-right: 5px;
              }

              span {
                font-size: 16px;
                font-weight: bold;
              }
            }

            .text {
              font-size: 12px;
            }

            &.on {
              color: #ff4f4f;
            }
          }
        }
      }
    }
  }

  .btns {
    .btn {
      display: inline-block;
      width: 120px;
      height: 28px;
      line-height: 28px;
      margin-left: 5px;
      color: #cfeaff;
      font-size: 14px;
      background-color: rgba(11, 44, 106, 0.8);
      border: 1px solid #084be7;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;

      &.on {
        color: #fff;
        background-color: #103985;
        border-color: #0089e9;
      }
    }

    .unit {
      float: right;
      margin-top: 5px;
      margin-right: 20px;
      font-size: 12px;
    }
  }
}
</style>
